<template>
  <div class="my-bill-content">
    <div class="com-top-nav">
      <van-nav-bar
        title="我的账单"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <!-- <div class="select">
        <p @click="showTimePopup = true">{{timeValue[0]}}<span></span></p>
        <p @click="showTypePopup = true">{{typeValue[0]}}<span></span></p>
      </div> -->
      <div class="bill-container">
        <!-- <p class="bill-title">2018年03月</p> -->
        <div class="bill-list-item" v-for="(item,i) in info" :key="i">
          <!-- <img src="../../../static/img/person.jpg" alt=""> -->
          <div class="center">
            <p>{{item.user_name}}</p>
            <p class="tips">{{item.out_trade_no}}</p>
            <p class="tips">{{item.createdAt.replace(/[T]|[Z]/i,' ').replace(/Z/i,' ')}}</p>
          </div>
          <div class="right">
            <p>{{item.total_fee}}元</p>
            <p class="tips">{{item.tag}}</p>
          </div>
        </div>



      </div>
    </div>
    <van-popup v-model="showTimePopup" position="bottom" :overlay="true">
    <van-picker
      show-toolbar
      ref="timePopup"
      @cancel="onCancel"
      @confirm="onConfirmTime"
      :columns="timeDataList"
      :value="timeValue"
    />
  </van-popup>
    <van-popup v-model="showTypePopup" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        ref="typePopup"
        @cancel="onCancel"
        @confirm="onConfirmType"
        :columns="typeDataList"
        :value="typeValue"
      />
    </van-popup>
  </div>
</template>
<script>
import { List, Popup, Picker } from 'vant';
  export default {
    components: {
      vanList: List,
      vanPicker: Picker,
      vanPopup: Popup
    },
    data(){
      return {
        info:[],
        isShowError: false,
        errorTips: '',
        showTimePopup: false,
        showTypePopup: false,
        timeDataList: [{values: ['全部月份', '一月', '二月']}],
        timeValue: ['二月'],
        typeDataList: [{values: ['全部', '233', '332']}],
        typeValue: ['全部']

      }
    },
    watch: {
      showTimePopup() {
        if(this.showTimePopup) {
          this.$nextTick(() => {
            this.$refs.timePopup.setValues(this.timeValue);
          })
        }
      },
      showTypePopup() {
        if(this.showTypePopup) {
          this.$nextTick(() => {
            this.$refs.typePopup.setValues(this.typeValue);
          })
        }
      }
    },
    mounted() {
    },
    created(){
      this.mybill()
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      handleSubmit() {},
      onCancel() {
          this.showTimePopup = false;
          this.showTypePopup = false;
      },
      onConfirmTime(value, index) {
        this.timeValue = value;
        this.showTimePopup = false;
      },
      onConfirmType(value, index) {
        this.typeValue = value;
        this.showTypePopup = false;
      },
      mybill(){
        this.axios.get('/api/user/bill',{params:{uid:JSON.parse(sessionStorage.getItem('user')).uid}}).then(r=>{
          if(r.data.err_code ==0){
              this.info = r.data.data;

              console.log(r.data.data)
          }
        })
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../../static/style/var');
  .select {
    display: flex;
    background-color: #ffffff;
    border-bottom: 1px solid @border-color-default;
    p {
      flex: 1;
      padding: 15px 0;
      text-align: center;
      color: @font-dault-color;
      span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(../../../static/img/arrow-down.png) no-repeat;
        background-size:  20px 20px;
        margin-left: 5px;
        vertical-align: text-bottom;
      }
    }
    p:first-child {
      border-right: 1px solid @border-color-default;
    }
  }
  .bill-container {
    background-color: #ffffff;
    .bill-title {
      padding: 10px 15px;
      color: @normal-font-color;
      font-size: @normal-font-size;
      border-bottom: 1px solid @border-color-default;
    }
    .bill-list-item {
      display: flex;
      padding: 20px 15px;
      color: @normal-font-color;
      font-size: @normal-font-size;
      border-bottom: 1px solid @border-color-default;
      img {
        padding-right: 10px;
        width: 46px;
        height: 46px;
        align-self: center;
      }
      .center {
        flex: 1;
      }
      .right {
        text-align: right;
      }
      .tips {
        color: @weak-tips-color;
      }
    }
  }
</style>
